Conocimos un Widget para etiquetas relacionadas hace un tiempo, ese widget se añadía de forma muy sencilla, sin embargo siempre nos complicamos la vida y su personalización no estaba al alcance de todos porque los estilos se encontraban en el interior de un script, había que editar el archivo js. y cómo no, saber qué partes modificar, viendo ese archivo a cualquiera se le quitaban las ganas de hacerlo.

Hoy, he visto un widget con las mismas características pero mucho más funcional ya que nos proporciona los estilos y podemos jugar un poco con su apariencia..
Su creador es Aneesh, de Blogger Widget en su entrada nos explica los sencillos pasos a seguir.
Nos situamos en Plantilla Edición de HTML y buscamos </head> justo antes de esa etiqueta pegamos lo siguiente.


Ver código

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Guardamos los cambios y esta vez marcamos para expandir la plantilla. Allí buscaremos la siguiente línea:
<div class='post-footer-line post-footer-line-1'>

En lugar de esa línea puede que tengamos la siguiente:
<p class='post-footer-line post-footer-line-1'>

En ambos casos añadiremos justo después lo siguiente:


Ver código

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Donde var maxresults=5; añadiremos la cantidad de miniaturas que mostraremos, hay que tener en cuenta el espacio que tenemos para las miniaturas, si añadimos una cantidad mayor de la que admite nuestro espacio las miniaturas se mostrarán en la siguiente línea.


Para cambiar el título Related Posts podemos hacerlo en:
var relatedpoststitle="Related Posts";
En caso de no querer título veremos más adelante como eliminarlo.

Las imágenes son rotativas, si tenemos un número menor de etiquetas de las añadimos en var maxresults=5; se mostrarán siempre las mismas aunque no en el mismo orden.
Puede darse el caso que no todas las entradas tengan imágenes, pero si la misma etiqueta y que configuramos para mostrar un número mayor a las imágenes existentes.En ese caso, se mostraría la siguiente imagen en lugar de la miniatura.



El widget lo añadimos en las página individuales, el autor indica añadirlo justo después de la línea:
<div class='post-footer-line post-footer-line-1'> 



Podemos mostrarlo después de la información de post-footer, autor, comentarios, etiquetas, sistema de votaciones ect... Si lo añadimos después de:
<div class='post-footer-line post-footer-line-3'>
el widget se mostrará en la última línea de post-footer.

Personalizando los estilos.
Los estilos se encuentran entre:
<!--Related Posts with thumbnails Scripts and Styles Start-->
y
<!--Related Posts with thumbnails Scripts and Styles End-->

El título lo personalizamos en related-posts h2
Con "font-size: 1.6em;" variamos el tamaño de fuente.
font-weight: bold; es la fuente en negrita.
color: black; es el color de fuente.
El estilo de fuente lo veremos en  font-family: Georgia, “Times New Roman”, Times, serif; 
Para eliminar el título lo podemos hacer añadiendo: visibility:hidden;
Si deseamos añadir una imagen de fondo lo haremos añadiendo:
background: url('aquí url de la imagen') repeat;

El breve resumen de texto que se muestra al pie de las miniaturas lo podemos modificar en related-posts a
Al final veremos dos veces related-posts a:hover el primero, donde dice color:black; será el color de fuente del breve resumen al pasar el cursor (efecto hover)
El segundo, en background-color:#d4eaf2; es el color de fondo al pasar el cursor.



Si decidimos dejarlo tal y como viene resulta muy sencillo de aplicar, al personalizarlo resulta molesto porque los cambios no se ven en vista previa, pero vale la pena probarlo aunque sea por darnos el capricho de ver el efecto.
No se olviden de guardar copia de la plantilla antes de realizar cambios.
felix

Pero bueno Gemma, acaso me lees la mente? mi pregunta del día era esta. Yo creo que además de ser la mas maja de la red tienes poderes paranormales,je,je.Lo que andaba pensando ayer noche.Gracias por la ayuda.Saludos

Responder
Mauri

see .. las columnas laterales se reducen a 200 y quedan super ... luego solo vuelvo a añadir las imagenes y todo arreglado :) .. el problema es que si agrando la columna de posts en esos 40 sobrantes, al final quedan igual las imagenes encima del texto, y siguen distrayendo. La idea es dejar la columna central del mismo ancho, para que queden separadas y el texto se vea más recatado. Pero si solo redusco las columnas laterales, y dejo igual la del centro, esta se ve corrida hacia la izquierda y no se como centrarla. En realidad ya habia probado esos cambios antes de hacerte la pregunta, pero al igual que el encabezado, siempre queda en vista previa nomas ... Gracias por la pasiencia, ¿¿como le hago?? <3

Responder
Mauri

JAJ! .. haber, la idea es dejar igual igual la columna de posts, pero angostar ambas sidebar para alejarlas un poco del texto y no mancharlo con el distractivo de los gadgets ... dejar el contenido un poco más ordenado y limpio (¿ahora me expresé mejor?). Un beso grande, disculpa por recurrir tanto a ti, pero en tecnologia soy un cero y armo mi blog gracias al tuyo ;)

Responder
felix

Hola de nuevo Gemma. El zoquete de turno.He introducido los dos grupos de códigos tal y como indicas y ahí me quede.Como sigo.Como lo hago para que me aparezca después del post.Mira que te explicas bien,pero lo mio es que es de parvulitos...Gracias

Responder
Mari Triqui

¡Muchas gracias! Es la primera vez que hago un cambio en mi blog siguiendo tus indicaciones y ha sido de lo más sencillo.
Saludos!

Responder
Ɣɑɲęşɑ Ƹ̵̡Ӝ̵̨̄Ʒ

Hola Gema pues en mi blog (http://desordenandoelblog.blogspot.com/) no tengo ni "div class='post-footer-line post-footer-line-1'" ni la otra, asi que bueno me quedé parada en este paso.

Otra duda, en http://tertuliademaestrasdeinfantil.blogspot.com/ tengo algo parecido pero al ser de (http://www.linkwithin.com/learn?ref=widget) sale como frase prediseñada "Quizás también le interese: " y mi duda es si se puede cambiar de alguna manera o si es mejor que lo quite y coloque lo mismo pero como tu nos lo explicas???

Responder
Admin

Que bueno gem@!! Hace un tiempito que andaba buscando algo como esto, lo había visto en varios blogs pero no sabía como hacerlo.

A la noche me pongo a trabajar, porque hoy festejan el cumple de mi nietito (5 añitos) fue el 25 pero lo festejan hoy, así que estoy de fiestita :D

Gacias por las explicaciones, espero que me salga ;)Sinó ya me tendrás por aquí ji ji ji

Y no te puedo mandar facturas (repostería) me saldría mas caro el envío que las masas en si ja jaa :D
Besotes ;)

Responder
Admin

Ahh... Te Propongo ya tiene favicón, pero todavía no se si me gusta... que opinás??

Responder
Gloria

Guauuu, que gran info Gema:)
Esto lo habia intentado con un scrip que tambien sirve para wordpress, pero lamentablemente quedaba entre el texto y el Leer mas.Luego lo hice con un scrip del maestro JMiur,ese es sin imágenes, y con códigos bastante extensos, así que en cuanto pueda voy a ver como queda con tu guía.

Pero antes de head tengo el favicon del blog, será que no modificará nada, que no lo afecte???.......

Besos desde Buenos Aires

Responder
Admin

Hola, ya está :D me salió a la primera ja jaa no lo puedo creer ;)

Pero... si, claro siempre algún pero, quiero personalizar algunas cositas, algo ya hice; el fondo, le saqué ese celeste por un amarillito que va de acuerdo al color del blog.

Pero el título que le puse "Artículos Relacionados", una, sale en mayúsculas y muuuuy grande, si, ya vi donde dijiste para corregir la fuente pero dice 1.6 em y yo no entiendo eso, solo se de pixeles, quisiera que fuera un tamaño acorde a los títulos del blog y en minúscula. La primer letra en mayúscula y las siguientes en minúscula, se entiende?

Otra cosa, la fuente del resumen que va debajo de las imagenes, es grande también y al encontrar una palabra larga como por ejemplo "enamoramiento" se ensima con el resumen que sigue. Hayyy te estoy enloqueciendo no? :o Porque no te fijas y lo ves por vos misma a que me refiero.
O sea tendría que ser esa fuente mas pequeña también, que quede como la fuente de los post (el tamaño) pero eso no se de donde se cambia...

Y ya que estamos algo que ya te había dicho antes que no tiene que ver con esto, o si, y nos quedó pendiente, en el footer de los post las letras salen muy ensima del borde a la izquierda de la pantalla, debe ser algún margin o pading, no se, que ignoro donde cambiar :O

Espero que termines bien el Domingo ;) Besote :P

Responder
EM2.0

Gema lo he hecho y sorprendentemente me ha salido a la primera, pero tengo una pega, ¿no se pueden elegir de alguna manera las imágenes?, no se una forma de que reconozca, es que me coge como imagen de muestra los botones de enlace, si no me he explicado bien echa un vistazo en el blog y me entenderás.

Responder
felix

Gemma hermosa, ya me salió, asi que no te molestes en contestarme. Gracias de todos modos por el post y por la ayuda que siempre prestas. Un abrazohttp://2.bp.blogspot.com/_q4j3j-JA2ro/SUMlxQnjCAI/AAAAAAAAGos/aqai3PYfQGA/s000/emoticonesBlanco.png

Responder
Gem@

El editor me jugó una mala pasada y pensaba, que mis comentarios habían salido, lo siento :(

yz Felix Casanova Briceño, me alegra que ya lo tenga solucionado, si te digo que probé mil formas no te lo vas a creer, hasta cometí un error en mi plantilla y k_nelita pensaba que estaba añadiendo las entradas relacionadas en mi blog.
Gracias por la amabilidad de venir a comentar que está listo:)

yz juan_santiago siento la demora.Mira aquí por si fuera eso lo que deseas hacer.
Te dejo los estilos:

#main-wrapper {
width: 450px;
margin-left: 100px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

yz Me alegra mucho que resultara bien Glora, ánimo y a seguir tuneando la plantilla :)

yz Vanesa tu plantilla no es original de Blogger, es una adaptación de Iván de Zona Cerebral, creo que viene algo así como:
<div class='post-footer clearfix'>
Haz lo siguiente, añade esa misma plantilla a tu blog de pruebas y añade el código de la entrada a continuación. Así evitamos sustos.
A tu segunda pregunta, si no recuerdo mal el título en este caso "Quizás también le interese: " se añade cuando una vez incorporamos los datos de mail y url del blog nos lleva a una pantalla donde aceptamos para instalar el Widget, es decir cuando nos pide que escojamos en qué blog lo vamos a añadir.

yz k_nelita vamos en orden.
*Sobre el favicon pues... ¿qué es en concreto? no veo bien de qué imagen se trata :O
¿y unas letras? ¿qué tal KN entrelazadas o con relieve? algo que te identifique en todos tus blogs.
Tener ideas tengo pero para las imágenes soy nula :(
Felicidades al nieto nos llevamos 3 días... y algunos años jajajajaja ¿también es libra?

*Sobre el gadget de miniaturas (el título) no sé por qué te pasa eso he probado varias veces y me toma la primera letra en mayúsculas y el resto minúsculas, puedes cambiar 1.6 em por 12px o el mismo tamaño de tus títulos en los post.
El tipo de letra no sé si estará definido en el script pero puedes probar a añadir en;

#related-posts h2{
text-transform: lowercase !important;
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}

El tamaño de letra para el breve resumen se muestra tal y como lo tenemos en nuestro blog ¿viste los ejemplos? lo que ocurre que al mostrarse en mayúsculas parece de mayor tamaño. Veamos si funciona lo anterior y el tamaño se ajusta.

*Para el post-fotter prueba con:
margin: 25px 0 30px;
padding: 20px 10px 5px; ;)

yz Dña. Urraca el gadget adquiere las imágenes de cada post, por eso cuando no hay imagen muestra una por defecto que trae el script, se podría intentar añadir a ese post alguna imagen relacionada con el tema con la idea que en lugar de mostrar los botones coguira esa imagen, no tengo otra solución para eso :(

Responder
Admin

Pues sigamos el orden:
1) El favicón es una imagen del color del blog con una letra T y una P, iniciales del blog, la K está un poco mal vista este último tiempo en mi país ja jaa, pero si, me di cuenta que no se nota mucho es que es tan pequeño... Supongo que con otras letras sería mas de lo mismo, creo que lo cambiaré por algún logo... en los otros blogs identifica bien al blog en cuestión, no a mi misma...

2)Sobre el gadget de miniaturas, ya cambié el tamaño de las fuentes del título, pero no lo de que sale siempre en mayúsculas, voy a probar lo que dices, aunque me comuniqué con el autor y parece que habría que editar el script, cosa nada fácil, ya lo intenté y no sale.
Claro que hay que editarlo y alojarlo en nuestro servidor, yo lo hice en Google Sites, pero no sale...

También cambié la familia de fuentes para el título, pero para los breves resumenes no hay caso, ni achicar la letra ni nada, está en el script...

3) Y lo del post-fotter ya lo pruebo y te digo ;)

Besos :P

Ahh me queda algo mas, lo de los créditos, viste como quedó? Sale todo en mayúsculas también, debe haber alguna propiedad en la plantilla que muestra todo en mayúsculas, lo mismo que los títulos de las sidebares...

Saqué la imagen del footer porque se sobreponía con la publi y no se como arreglarlo :(

Responder
Admin

Para el título de los post relacionados el lowercase me lo pone todo en minúscula :S Para que reconozca la mayúscula del principio no es upercase? Porque lo puse y nada, no, creo que es capitalize no?

El post-footer ya está, también tendría que ponerle el capitalize creo... ya pruebo...

Responder
Admin

Sii, ya está! es capitalize, así reconoce la primera letra como mayúscula y las siguientes en minúsculas, ja ja lo saqué ;)

Responder
Gem@

yz La capitalize añade mayúsculas a la primera letra de cada palabra y si le pones none muestra el texto tal y como lo escribimos :O

mayúsculas (uppercase)
minúsculas (lowercase)
la primera letra de cada palabra en mayúscula (capitalize)

pero si funciona aceptamos capitalize :D
Ya sabes eso.. si algo funciona no lo toques.

El breve resumen debe adquirir la misma fuente que el texto de las entradas si no lo hace prueba añadiendo !important;

Responder
Admin

Ja jaaa si, ya conozco eso de si funciona no lo toques :D y bueno funciona ;)
Pero lo del breve resumen donde crees que debería colocar lo de !important;??

Responder
Gem@

yz Prueba en
#related-posts a{
color:black;
font-size: 12px !important;
text-transform: capitalize !important;
}

Responder
Admin

El capitalize me lo acepta, pero el tamaño de la fuente no :( llegué a ponerle hasta 9px y no cambia nada grrr...

Responder
Admin

Esas propiedades están definidas en el script, ya las vi, pero no puedo guardarlo después de modificarlo como .js
Como hago eso así lo subo a Google Sites?
Dice font-size: 12px, eso ya está predeterminado, pero es muy grande esa fuente, por eso no puedo cambiarlo de ningún otro lado...
Ya se modificar el script pero no lo puedo subir con .js, solo como txt y no lo reconoce la plantilla :(

Responder
Gem@

yz Pues la única solución es subirlo como js y sustituir la url del autor por la tuya.
¿Dónde? a estas alturas es la pregunta del millón, es una locura lo que te voy a decir pero mira aquí

Responder
Unknown

gem@: no es que no me guste este sistema de enlazar entradas, pero mi blog ya está muy recargado. así que siguiendo tus consejos apliqué lo que ponen jmihur y olomán. PERO NO ME FUNCIONA AUNQUE LO HICE TAL CUAL. ¿Crees que se debe a que mi plantilla es un tanto especial? ¿Podrías mirar qué es lo que falla? http://parabninosconcabeza.blogspot.com.
Ah! Lo único que sale es el título: "entradas relacionadas", pero no los links... ayyy. Suspiro porque me `puedas dar una mano!!!

Responder
Unknown

es http://paraninosconcabeza.blogspot.com (perdón por la errata)

Responder
Admin

Si, gem@ eso es lo que hice, lo modifiqué y lo subí a Google Sites pero el script está en txt, y como tal no lo reconoce, no se como hacer que sea .js.
Eso es lo que te decía, habrá que modificar algo mas aparte de la url?
Probé subirlo a GS y también a la plantilla directamente pero no lo acepta dice que tiene errores de XML que está mal formada y que se yo, tal vez no lo esté poniendo en el lugar apropiado o lleve algo mas de lo que está dentro del contenido del script... Que crees? :o

Responder
Gem@

yz ¿has probado en Google Sites desde hace un par de meses acepta js :O

Responder
Gem@

yz lk si los pasos que has seguido son de J.Miur y Oloman que me parece genial lo más acertado sería que repases la entrada de ellos, por una parte porque no tengo idea de qué pasos has seguido y por otra porque son cambios que no se muestra en el código fuente y no puedo verlos. Los errores se descubren siguiendo paso a paso lo que hicimos.
Verás como así das con el error, y lee los comentarios en ellos puedes encontrar respuesta :)

Responder
Unknown

¡ya está hecho! lo he resuleto, gracias mil gem@!!

Responder
Gem@

yz ¡¡Bien!! :D

Responder
Arepita

no me funciona para nada :S no encuentro algunos codigos o no estan al igual que como lo pusiste en la explicacion =S no puedo creer que tenga que quedarme con el scrip de "linkwithin" http://quemagoma.net

Responder
Admin

Mirá gem@ acá está el script que modifiqué y subí a Google Sites: http://sites.google.com/site/kriojakyo/Home/scripts/Relacionados.js

Lo pongo en lugar del script del autor y no sale nada :S
Le modifiqué solo el tamaño de la fuente del breve resumen...

Que tiene esa dirección o url que no la toma mi plantilla??

Otra persona que escribió en su web me dijo que el lo hizo, y lo comprobé, a el le sale bien...
Porqué a mi no buaaa...

Responder
Gem@

yz Arepa marca para expandir la plantilla de artilugios ;)

yz Ni idea Knelita ¿has probado con la url de quien te lo dijo para ver si funciona?

Responder
Admin

Si gem@, claro que probé, y funciona, la fuente va bien, pero este señor le ha cambiado también la imagen para mostrar cuando no hay imagen en el artículo (que también está en el script), y es una caricatura que no me gusta, y al tratar de modificar eso también me pasa lo mismo, lo subo a Google Sites y no me lee la url :S

Responder
Unknown

Oi Gema, tudo bem ? Adorei o hack e gostaria de coloca-lo como post em meu blog :D. Beijos do Brasil

Responder
Gem@

yz Todo solucionado k_nelita (Google me aprecia, debe ser eso) :D :D

yz Saludos Elke, puedes añadirlo en tu blog si así lo deseas ;)
Abrazos.

Responder
Unknown

Hola Gema

Primero agradecerte que compartas estos trucos con todos.

He incluido todo el código en mi plantilla y supongo que lo he hecho bien ya que me ha dejado guardarla. Pero eso ha sido solamente con los dos primeros pasos pues al llegar al tercero me he perdido completamente. En concreto no sé donde insertar el tercer codigo. Más bien no sé que es eso de las páginas individuales, si tengo que buscar otro código en la plantilla o si debo insertarlo en la configuración del blog al igual que se hace con "leer más"

Te agradecería un poco de ayuda ^^

Responder
Gem@

yz Hyocam en http://mirageofblaze.blogspot.com/ lo tienes añadido perfectamente.
Si deseas hacer algún cambio en los estilos (color de texto, efecto al pasar el cursor..) puedes hacerlo en el código que añadimos antes de </head> a partir de donde dice en la entrada "Personalizando los estilos" :)

Responder
Cyberprimo

Me gusto como quedo este trucazo en mi blog, gracias Gemq por el tip ;)

Responder
Arepita

Mira gema, me aperece la linea que dices:

p class='post-footer-line post-footer-line-1'

pero me aparece de este modo:

p class='post-footer-line post-footer-line-1'>span class='post-author vcard'

nota: le quite algunos de los elementos como estos "<>" por que no me permitia dejar el comentario completo

donde es que tengo que incluir el codigo despues que expando la plantilla de artilugos?

Responder
Anónimo

Hola Gema, Dios te bendiga.

Te queria comentar lo siguiente: visitè un blog llamado "recursos para tu blog" en el que vi una manera bastante chevere de organizar las etiquetas, queria saber como se personaliza el diseño de las etiquetas para no tener las nubes de etiquetas de siempre...

agradezco tu ayuda de antemano

Responder
Gem@

yz No hay de qué Cyberprimo :)

yz Anónimo no sé qué tipo de etiquetas tienes, si no veo tu blog no puedo ayudart, lee lo que dice arriba del formulario.

Responder
Nicole

Hola Gem@ :D
Esto no tiene nada que ver con tu publicación.
Resulta que encontré un sitio en el que dan un código para que, en lugar del típico logo de Blogger, se vea un lindo dibujo :P en la barra de exploración.
Pero aunque lo puse, no paso nada.
Este es el sitio:
http://evelyns-place.com/?page_id=302
Me parecen muy lindos y quizas tu encuentres la forma de que funcionen.
Gracias Gem@ ;)

Responder
Gem@

yz Strokera mira la siguiente url donde explico como hacer lo mismo:
http://gemablog-.blogspot.com/2007/02/favicn-para-blogger-beta.html

Responder
cn

hola gem@, acabo de pponer las related posts en http://cielosdondeestaeldinero.blogspot.com y me aparecen dos veces los related posts debajo de cada entrada. algunos se repiten, otros no. ¿qué he hecho? no creo haberlo repetido dos veces... de hecho no estaba el código... ¿?

Responder
Gem@

:: cn no veo motivo para que se repita he probado ahora mismo tal y como viene explicado y no veo problema alguno.
Intenta añadirlo justo después de:
<div class='post-footer-line post-footer-line-3'>
y vemos si se solucina.

Responder
cn

ya está arreglado. parece que pegué dos veces el mismo script

Responder
Gem@

:: Estupendo :)

Responder
cn

hola gem@, ahora lo que veo es que aunque cambio el tamaño de letra y quito el color del background hoover, no se me cambia... ¿?

Responder
Gem@

:: Eso lo puedes modificar en:
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}

Responder
cn

Te mando el script como lo tengo configurado, para que veas que no responde:


#related-posts h2{
font-size: 1em;
font-weight: normal;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
visibility:hidden;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#000000;

Responder
Gem@

:: Yo creo qe te has confundido, en la plantilla lo tienes dos veces una al principio de la plantilla y otra al final de los estilos.
Y otra cosa las miniaturas se montan sobre las etiquetas del pos-footer yo creo que deberías mirar eso que te dije anteriormente de cambiar el código después de post-footer-line-3
Y una última sugerencia, he visto qu etienes un script para expandir y recoger el texto de las entradas, es el siguiente:
http://forevergema.googlepages.com/functiontoggleIt.js
Los scripts que dejo el enlace son para descargar el archivo no para copiarlo porque si el archivo (el mio) deja de funcionar dejará de funcionar también en tu blog y no siempre tengo los scripts de respaldo.

Responder
cn

uy, gem@ ¿y qué archivo es el que debería descargar? eso lo tengo así en casi todos mis blogs:::?

Responder
cn

hola gem@, en efecto el código aparecía dos veces y lo he arreglado, también puse el otro código donde me indicas pero el texto sigue superponiéndose, no consigo reducir el tamaño ni eliminar el efecto hoover...

Responder
Gem@

:: Pegas la siguiente url en la barra del navegador y te descargas el archivo a tu PC, luego lo subes a un servidor y la url que te proporciona ese archivo la copias.
En la plantilla debes buscar esta isma url y la sustituyes por la de tu archivo.
archivhttp://forevergema.googlepages.com/functiontoggleIt.js

El sistema de miniaturas funciona perfectamente lo que ocurre que desde el principio se han cometido errores.
En la entrada dice que se añada el primer código (los estilos) antes de </head> fíjate que lleva una barra de cierre justo después de los estilos va un script y luego ya el segundo código.

Responder
Gem@

:: El archivo que debes cambiar es
http://forevergema.googlepages.com/functiontoggleIt.js

Antes se colaron algunas letras al copiar.

Responder
Unknown

intentarlo tengo forevergemas ot todos los blogs...

Responder
Gem@

:: Si no consigues cambiarlo al menos descargar el archivo en tu PC para tenerlo cuando te haga falta si deja de funcionar porque está alojado en Google Pages :S

Responder
cn

homa gem@, no acabo de entender qué archivo debo bajar... una pista??

Responder
Gem@

:: En el comentario 55 te dejé el archivo, es el siguiente:
http://forevergema.googlepages.com/functiontoggleIt.js
Copias esa dirección y la pegas en la barra del navegador, de esa forma la descargas.

Responder
cn

hola gem@, he descargado el link y me aparece un código ¿y ahora qué hago? burra soyyy

Responder
Gem@

:: Cuando aparece ese código vamos a la pestaña Archivo del navegador y seguidamente a guardar como... eso hace que el archivo sea guardado en tu PC, fíjate en la carpeta que lo guardas :)

Responder
Unknown

bueno supongo que tengo descargado el archivo en mi pc (macintosh), pero ahora no tengo que hacer nada más ¿no? no es necesario pegar el código en mi plantilla, ¿no?

Responder
Gem@

:: lk descargarlo en tu PC es para la tranquilidad que lo vas a tener para ocasiones que te hagan falta.
Lo ideal, lo que debe hacerse, es alojarlo en el servidor de cada uno porque si un archivo está alojado en un sitio y lo están usando varias personas están consumiendo banda ancha de ese sitio y por consiguiente corren el riesgo que la banda ancha sea superada y deje de funcionar.
Los perjudicados no son solamente las personas que usan el archivo sino el propietario de ese servidor que sin comerlo ni beberlo se queda con archivos colgados y sin poder utilizarlos.
Por eso siempre digo... " La url del archivo es esa, la podéis descargar y alojarla en vuestro servidor" no digo copiarla y pegarla en vuestra plantilla...

Responder
cn

entiendo... ayss

Responder
Magdalena

hola Gem@, feliz año!
queria saber si hay forma de colocar esas imagenes con entrads relacionadas en la pagina principal, no en la de cada entrada
muchas gracias por compartir todo lo que sabes, es divertido aprender, probar y mejorar
besos!

Responder
Gem@

:: Saerwen para añadirlo en la página principal prueba como dice en la entrada:
"Podemos mostrarlo después de la información de post-footer, autor, comentarios, etiquetas, sistema de votaciones ect... Si lo añadimos después de:
<div class='post-footer-line post-footer-line-3'>
el widget se mostrará en la última línea de post-footer."

Responder
Dian'sStudio

Hola cielo, como estás?
Eh pasado a visitar el blog y me encontrado esto y me encanta, lo eh probado paso a paso pero no logro verlo... no se cual sea el problema.. se supone que tiene que salirme pero nada de nada.. porfa necesito tu ayuda.. :'(

Responder
Gem@

:: Yo lo veo perfectamente Diana :)

Responder
Canelaytu

Hola de nuevo Gema:
Sigo tratando de mejorar el blog. :D
He hecho lo que pones arriba y efectivamente me salen los 3 recuadritos, pero me gustaría ponerles la letra en color morado.
Así que (nada de reirse ;) ) en donde pones : color: black yo pensé aquí hablan en inglés y yo quiero lilac así que escribí eso y nada. Lo siguiente fue que miré en la wikipedia y ponia el color en este código: C7 15 85 y lo pegué, pero ni con esas.... así que no se como hacerlo ...
Me gustaría cambiar eso, y que saliesen un poco más cuadrados, es decir un poco más anchos y no tan largos, mira tu misma: http://canelaytu.blogspot.com
Supongo que lo del fondo es para todas las fotos, como por debajo de las 3 fotos, no? Si eso lo intento después... a ver como queda.

Muchas gracias.

Responder
Canelaytu

Ya he cambiado el color.... ;)
Lo único que me gustaría que los enlaces con las fotos fuesen un poco más cuadrados porque se me cortan las letras y las fotos... no se si es posible....
Muchas gracias :D

Responder
Gem@

:: Vaya!! veo que te ha cundido el fin de semana :)

El tamaño de las miniaturas aunque no lo parezca es igual en todas de 72x72 y son cuadrados, para modificar esa parte hay que hacerlo editando el script
http://blogergadgets.googlecode.com/files/relatedthumbs21.js
y no estoy muy segura que saliera bien el invento al menos es una cosa que siempre trato de evitar.
El que se corten las fotos es normal ya que no reduce la imagen sino que muestra una miniatura de "parte" de esa imagen.
Las letras puedes intentar forzar los estilos en #related-posts a" con !important para que sean más pequeñas y queden más completo.

#related-posts a{
font-size: 1.0em !important;
......
......
......
}

Responder
Canelaytu

Hola de nuevo Gema:
Gracias por responder!!
No voy a modificar el script por lo que pueda ser.

He hecho lo que me pones de pegar justo debajo de related posts a, lo de la fuente, pero se me siguen cortando las letras...

Mira, yo tengo esto:
#related-posts a{
font-size: 1.0em !important;

color:#6728B2;


}

Responder
Gem@

:: Yo creo que lo que tu le llamas cortarse las letras es que pasan a la línea siguiente, ahí no podemos hacer nada porque hay un espacio de ancho igual que la imagen pero justo debajo que es donde sale el texto o letras.
Si por ejemplo nos ponemos a escribir y nos falta espacio al final de la línea añadimos un guión pero aquí no es igual, no se puede añadir guión pasa a la línea siguiente como en tu editor de entradas cuando escribes un texto cualquiera, no justifica el texto.
No sé si me explico bien :S

Responder
Canelaytu

ah!! vale, pues entonces no se puede hacer nada. De todas formas no queda tan mal,,, no?

Tendré que seguir navegando por tu blog, a ver qué modifico ahora. :D

Por cierto Gema, si no es mucha indiscrección, de donde eres? Voy a tener que dedicarte una receta!!! jajajja

Responder
Gem@

:: jajajajaja ¡que bueno! eso si que es original dedicar una receta :D

Soy de Murcia, concretamente de Cartagena lo habrás oído porque está muy cerquita de La Manga del Mar Menor :D

Responder
Canelaytu

Bueno Gem@ ya casi tengo la receta!!! jajajaaj
:) A ver si este finde me animo a hacerla, o sino como limite lunes o martes de la semana que viene :D .
Cuando la publique pondre un enlace a tu web, no hay problema, verdad? :)

Te voy a seguir dando la lata, eso si!!! jajajaja tengo que investigar algo facilito para cambiar ahora :P

Responder
Gem@

:: Estoy impaciente :)
Y no, claro que no me molesta que pongas un enlace.

Responder
Canelaytu

Lo prometido es deuda!!!! :D
Espero que te guste. (y sobretodo que esté bien hecho)
http://canelaytu.blogspot.com/2010/02/zarangollo-murciano.html
:D

Responder
Gem@

:: Canelaytu divino te ha quedado!!
No sé como agradecerte ha sido todo un detalle de tu parte. Un besazo !!!

Responder
Canelaytu

Gema, gracias a ti!!! :D
Que siempre contestas a todas mis dudas, y yo no tengo ni idea de como cambiar nada jajajjaja

A ver si esta semana me animo a cambiar alguna otra cosilla. O al menos a intentarlo :D

Responder
Unknown

hola gem@: en http://paraninosconcabeza.blogspot.com tengo entradas relacionadas pero con texto, Y NO APARECEN. ¿qué puede estar ocurriendo? en otros blogs me funciona, pero en este no..... en cualquier caso, si quisiera cambiar ese sistema por imágenes, ¿cómo lo sustituyo?

Responder
Gem@

:: Comprueba que el script esté online Lara, puedes copiar la url y pegarla en el navegador, si no está online mostrará una página de error.
Para sustituir un sistema por otro debes retirar el que tenes y añadir el nuevo.

Responder
Unknown

hoal gem>@ ¿cómo puedo eliminar el titulo related posts?

Responder
Unknown

hola de nuevo: estoy intentando eliminar el related posts que tenía, de solo texto, pero cada vez que lo intento me sale que head no está cerrada y me da error... ¿cuál puede ser el error? ¿cómo puedo encontrarlo? (ya he puesto a la vez el de entradas con imágenes... y va bien)

Responder
Gem@

:: Lara porque el título está incluido en e script y al quitarlo por eso da error, se puede intentar ocultarlo.
En los estilos del título donde dice:
#related-posts h2{

Añade a continuación
visibility:hidden;
display:none;

Con eso creo que no se verá el título ;)

Responder
Unknown

como siempre, eres un geni@ gem@!!!

Responder
Gem@

:: ;)

Responder
Anabel Cornago

¡Añadido! :)
Besotes.

Responder
Gem@

:: Anabel menudo cambio estás dando al blog :D

Responder
Anónimo

oye gema muy buen post sirve muy bien solo te quisiera preguntar como colocar el entradas relacionadas y las imaganes despues del post, asi como hacer que no sea parte del post y colocarlo abajo esque quiero enmarcarlo y ponerle un fondo diferente al del post, creo que con algun < div class ='' >
algo asi creo pero no se muy bien espero que me ayudes !!

Responder
Anónimo

oye gema no me has contestado y veo que si contestas a los mensajes -.- ps otra ves te dire que :s quisiera preguntar como colocar el entradas relacionadas y las imaganes despues del post, asi como hacer que no sea parte del post y colocarlo abajo esque quiero enmarcarlo y ponerle un fondo diferente al del post, creo que con algun < div class ='' >
algo asi creo pero no se muy bien espero que me ayudes !!

Responder
Pedro Pardo

hola Gem@, ante todo enhorabuena por tu blog, me está ayudando muchiiisimo!!
me interesa mucho conseguir estas 'entradas relacionadas' en la página principal además de en las particulares de cada entrada, se puede hacer?
muchas gracias de antemano por tu tiempo y un saludo!

Responder
Gem@

:: debería ser suficiente eliminando esa dos líneas en negrita Pedro.
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
aquí código
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Responder
Benko

Hola Gem@ he utilizado este script y funciona perfectamente... Me ha gustado.. Pero mi Blog es Fondo negro y he puesto al script un fondo gris... Lo que quiero es modificar la altura del recuadro.. Ya que los titulos son largos y salen de ese recuadro.. Me gustaria que me respondas.. Estare pendiente.. ;)

Responder
Gem@

:: Dj Benko prueba a poner la fuente de menor tamaño "font-size: 1.6em;" ;)

Responder
Benko

Por mas que intento, no puedo cambiar el tamaño de la fuente en esa seccion... He probado en el titulo de "Entradas relacionadas" y si funcionó pero en los titulos de las entradas... Queda igual, he puesto 1em; 1.6em 0.8em; tambien probé en px poniendo 10, 8 y no pasa nada, el tamaño sigue igual. :S

Responder
del batitú

hola Gema, acá estoy haciéndote pensar !!!! a ver si puedo hacer lo que me imagino, con tu ayuda, claro!!! mi blog es de fotos, y cada entrada tiene su etiqueta, y en la sidebar tengo la linda nube de etiquetas (hasta acá todo bien).
lo que quisiera hacer es poner una entrada relacionada (sólo una fotito debajo de la entrada) pero que sea un link a la etiqueta correspondiente a esa entrada. y cada entrada tiene etiquetas diferentes y otras se repetirán. Se entiende? es eso posible?
perdón por el trabajo que te doy :$ ja ja

Responder
Gem@

:: del batitú con esta entrada lo que se consigue es eso, que la miniatura que se muestra sea un enlace a la entrada a la que pertenece la imagen, trabaja con las etiquetas por lo que siempre se mostrará la miniatura perteneciente a la misma etiqueta.
También puedes hacer que se muestre sólo una imagen en var maxresults=5; si lo sustituyes por var maxresults=1; no sé si es eso lo que deseas hacer :O

Responder
del batitú

Eso mismo!!!! luego te cometo cómo quedó. Genia!!!!

Responder
del batitú

Ay Gema, nada me sale últimamente. No quedó nada. Agregué todos los códigos con algunas modificaciones, pero no. Intenté lo que le explicas a Pedro del comentario 92 por las dudas, ya que no tengo página de inicio marcada, pero en ese caso me da error, así que dejé el código como estaba. Si podés revisar Gema, sin apuro nomás...:O :D

Responder
del batitú

Para sacarte un poco de trabajo, fui a ver que decía Oloman sobre este tema, y él le agrega el script al código, así que lo cambié a ver que pasaba... y nada, todo sigue vacío, pero bué, ya que agregué su sistema le pregunté a ver qué opina. cariños :)

Responder
Gem@

:: del batitú yo veo perfectamente el ejemplo aplicado a tu blog mostrando 3 miniaturas :S

Responder
del batitú

en serio? capaz que siempre se vio, jajajaj por qué será que yo no lo veo, será algo que me falta en la computadora? qué gracioso.. Gracias Gema, veré cómo lo resuelvo, ya que como no lo veo no tengo ni idea de estilos y demás.:O

Responder
del batitú

ya entendí el problema ajajajjjaaj, se ven en las entradas individuales !!!!

Responder
Gem@

:: Pues mira, yo lo veo con Firefox así:
http://img7.xooimage.com/files/f/8/4/12-9-2010-17.9.41-1-2061092.jpg

Responder
del batitú

claro Gema, chambona yo que como no lo veía en la entrada principal ni en las entradas por fechas del archivo, pensaba que no estaban. Tardé unos días en darme cuenta de dónde era que estaban. ja ja ja. Gracias Gema, eres un sol con esa paciencia!!!!

Responder
Gem@

:: Ahora entiendo, eso quiere decir que no lees tus propias entradas :D :D :D

Responder
Ricardo Tenorio

Hola Gema, mira que visito tu blog y me ha maravillado.. he logrado con éxito el code.. me ha encantado como se ve.. MI DUDA es.. que hago para que ese scrip de ENTRADAS RELACIONADAS (title que yo le puse) me aparezca en todos los posts de la pag principal y no solo al darle clic a la noticia individual.. me explico?

Un GRAN ABRAZO y SALUDO
www.tucinevip.com

Responder
Gem@

:: Hola Richard, el código contiene una condicional para que sólo de muestre en las páginas individuales, prueba, es la primera línea:
<b:if cond='data:blog.pageType != &quot;item&quot;'>

y al final el cierre de la misma etiqueta:

</b:if>

Responder
Gem@

:: Quise decir prueba a eliminarla pero sólo lo pensé y no lo dije :S

Responder
Ricardo Tenorio

Gracias por tu respuesta Gem@: Yo la he eliminado.. y no ha pasado nada.. me sigue apareciendo sólo en la página individual... :S

Que hago?

SALUDOS

Responder
Eligor!

Me gusta esta entrada esta buenisima yo ya la aplique a mi blog, donde puedo modificar para que me caiga una miniatura mas en mi "Articulos Relacionados" (http://eligor-siniestro.blogspot.com/2010/08/hangatyr-helwege-2010.html) Como me sobra espacio seria bueno agregar una mas es decir tendria que correr alguna parte del codigo hacia la isquierda o no? y como? intente con un margin-left pero no me resulto :S de ante mano te lo agradeceria un monton Gracias. Disculpa las molestias :)

Responder
MaCaPe

Muchas gracias, lo dífícil lo conviertes en fácil. Alojé el script en dropbox, para no consumir banda, pero no me funciona, lo sustituí por el script que está antes de fin de head...? Saludos

Responder
Gem@

:: Saludos MaCaPe, mira la siguiente entrada de Vagabundia siguiendo esos pasos no necesitas alojamiento externo, así es como está añadido en mi blog :)

http://vagabundia.blogspot.com/2010/12/posts-relacionados-con-miniaturas.html

Responder
togoma

Hola, gracias por compartir.
Ayer mismo lo puse siguiendo paso a paso todas las explcaciones pero a mi no sale nada, todo esta como antes :S . Me podrias ayudar? Gracias

Responder
togoma

Se me olvido poner el blog: http://megapeliseroticas.blogspot.com/

Responder
Gem@

:: togoma repasa lo que hay que añadir justo después de div class='post-footer-line post-footer-line-1 no estoy muy segura si hay un error ahí.

Responder
albafoto

hola gema, haber si me puedes ayudar, lo he probado mil veces hasta he alojado el script en un servidor propio de dropbox pero no me funciona y es algo que me fastidia porque lo tenia instalado en otra plantilla y me funcionaba a las mil maravillas. Un abrazo te dejo mi blog si te apetece para echarle un vistazo.


http://albacete-fotos.blogspot.com/



muchas gracias amiga

Responder
Gem@

:: mojul8 si este mismo sistema te funciona en otro blog entonces el problema debe ser que no se está añadiendo bien ¿por qué no pruebas en otro blog pero con esa misma plantilla que utilizas?

Responder
Alba Foto

es el mismo blog pero con plantilla diferente, voy a intentarlo pero ya lo he realizado de mil maneras. ¿podria tener alguna incompetencia con alguna biblioteca?..antes lo de las flechas de subir y bajar no me funcionaba con el efecto deslizante y ahora si lo implementé y me suben con dicho efecto y con una biblioteca jquery o javascript no recuerdo cual de las dos...

muchas gracias por contestar,maja. voy a darle otra vuelta a ver que veo.

Responder
albafoto

flechas de subir y bajar no me funcionaba con el efecto deslizante y ahora si lo implementé y me suben con dicho efecto y con una biblioteca jquery o javascript no recuerdo cual de las dos...

muchas gracias por contestar,maja. voy a darle otra vuelta a ver que veo.

Responder
Gem@

:: Cuando hacemos cualquier cambio en la plantilla y no da buen resultado nos queda la duda que algo hicimos mal o que algo no sabemos qué está impidiendo que ese cambio de buen resultado. Lo primero que hacemos es repasarlo y si pensamos que está bien entonces probamos en otro blog si en ese otro blog funciona es obvio que se trata de la plantilla de nuestro blog original.
Utilizar distintas librerías puede hacer que los efectos no funcionen por eso es recomendable inclinarse por la misma librería para todo :)

Responder
albafoto

seguiré probando gracias gema por todo

Responder
angelikova

excelente artículo, es el más sencillo, fácil de comprender y sí funciona, gracias!

Responder
Gem@

:: Gracias por el comentario angelikova :D

Responder
pequesymamis

Soy muy torpe, no lo ogro, lo he intentado varias veces, pero nada.....Gema, cariño, necesito tu ayudaaaaa!!! un beso www.pequesymamis.blogspot.com

Gem@

Pequesymamis nada de torpeza, he comprobado todo y al parecer la url del script que contiene la primera parte no estaba online.
Ya lo he solucionado y debería salirte bien :)

Ann Reed

Me retracto, sí funcionó =) aunque tuve que hacerlo todo con la plantilla de artilugios marcada -.-?

Responder
Laura

Hola gem@!! lo primero darte las gracias por tus explicaciones, son geniales!!
He intentado poner esto de las entradas relacionads mil veces y de mil maneras... Ahora lo acabo de intentar con lo que tu explicas pero sigo sin poder ver nada de nada...ni un cambio... ¿sabes lo que puede pasar?
mi blog es http://1delicious.blogspot.com.es/

Muchas gracias por tu ayuda!!!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top